<template>
	<view class="container">
		<view class="pad-30 pad-bottom-180">
			<view class="flex betweenX centerXY mar-bottom-30">
				<view class="flex centerY">
					<view class="mar-right-20">
						<up-tag v-if="props.num == 1" text="全部" @click="checkboxClickAll" type="success"
							:plain="!checkboxAll"></up-tag>
					</view>
					<view class="mar-right-20" v-for="(item, index) in checkboxs" :key="item.level">
						<up-tag :text="item.name" :plain="!item.checked" type="success" :name="index"
							@click="checkboxClick(index)">
						</up-tag>
					</view>
				</view>
				<up-tag text="换一批" @click="getPageListNearby"></up-tag>
			</view>
			<view class="mar-top-bottom-30 pad-30 bg-white radius30">
				<uni-datetime-picker @hourChange="hourChange" v-if="calenderNum.length > 0" :calenderNum="calenderNum"
					:start="minDate" :end="maxDate" :isIcon="false" :border="false" hideSecond v-model="plan_begin_at"
					@change="hanldeConfirmDate"></uni-datetime-picker>
			</view>

			<view v-for="(item, index) in workerList" :key="index" @click="hanldeClick(item.id)"
				class="centerY bg-white radius16 mar-bottom-30 pad-30 ">
				<view class="border">
					<u-icon v-if="workerId.includes(item.id)" size="20" color="#0055FE"
						name="checkmark-circle-fill"></u-icon>
				</view>
				<view class="centerXY mar-left-10 flex-w betweenX">
					<view class="centerXY flex-w">
						<image class="image" :src="item.avatar" mode="aspectFill"></image>
						<view class="font-30 mar-left-20 flex-w">
							<view class="betweenX">
								<view class="color-text">{{item.name}}</view>
								<view class="centerXY font-28 range-right">
									<image class="range" src="@/static/image/range.png" mode="">
									</image>
									<view>距离<text class="color-primary">{{item.dist}}</text>km
									</view>
								</view>
							</view>
							<view class="color-error font-26" v-if="item.skills[0].order_price">
								￥{{item.skills[0].order_price}}元
							</view>

							<view class="mar-top-30 color-warning betweenX centerXY">
								<view>
									<view class="centerXY bg-gold" v-if="item.skills[0].level == 30">
										<image class="medal" src="/static/image/gold.png" mode="">
										</image>
										<view class="font-22 mar-left-5">金牌保洁师</view>
									</view>
									<view class="centerXY bg-silver" v-else-if="item.skills[0].level == 20">
										<image class="medal" src="/static/image/silver.png" mode="">
										</image>
										<view class="font-22 mar-left-5">银牌保洁师</view>
									</view>
									<view class="centerXY bg-high" v-else-if="item.skills[0].level == 10">
										<view class="font-22 mar-left-5">优质保洁师</view>
									</view>
								</view>
								<view v-if="num == 1" @click.stop="hanldeworkerInfo(item.id)"
									class="font-26 color-646464 centerXY">
									<text>介绍</text>
									<up-icon name="arrow-right" size="13" color="#646464"></up-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="centerXY mar-top-100 font-26 color-646464" v-if="workerList.length == 0">没有找到匹配的工人，选择其它时间试试
			</view>
		</view>
		<view class="betweenX button-bottom centerXY">
			<view @click="hanldeNext" class="btn mar-left-20 button-style">确定</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted, watch, reactive, computed } from 'vue';
	import { pageListNearby, addressDetail, enableWorkerCnt } from '@/api/index.js'
	import { useStore } from '@/store/useCounterStore';
	import { timeFormat } from '@/node_modules/uview-plus';
	import { pageListNearbyV2 } from '@/api/index.js'
	import utils from '@/util/util.js'
	const store = useStore();

	// 计算plan_begin_at
	const plan_begin_at = computed(() => {
		
		console.log(store.workerParams.plan_begin_at)
		return store.workerParams.plan_begin_at
	})

	// 设置时间选择的区间
	const minDate = Date.now() + (2 * 60 * 60 * 1000); // 开始时间默认2小时过后
	const currentDate = new Date(Date.now());
	// 最大可以预约2个月之后的
	const maxDate = currentDate.setMonth(currentDate.getMonth() + 2);

	const checkboxAll = ref(false);
	const checkboxs = reactive([
		{ checked: false, name: '金牌', level: "30" },
		{ checked: false, name: '银牌', level: "20" },
		{ checked: false, name: '优质', level: "10" }
	]);

	const formatter = (type, value) => {
		if (type === 'minute') {
			return `00`;
		}
		return value;
	};

	const hanldeConfirmDate = (e) => {
		// formData.value.plan_begin_at = e.value;
		store.workerParams.plan_begin_at = e;
		store.workerItme = [];
		worker_ids.value = [];
		getPageListNearby();
	}

	// 全选切换
	const level = ref("");
	const checkboxClickAll = () => {
		checkboxs.forEach(item => {
			if (checkboxAll.value) {
				item.checked = false;
			} else {
				item.checked = true;
			}
		})
		checkboxAll.value = !checkboxAll.value;
		worker_ids.value = [];
		level.value = "";
		getPageListNearby();
	}

	const checkboxClick = (index) => {
		checkboxs.forEach(item => {
			item.checked = false;
		})
		checkboxs[index].checked = !checkboxs[index].checked;
		checkboxAll.value = false;
		worker_ids.value = [];
		level.value = checkboxs[index].level;
		getPageListNearby();
	};


	const workerId = ref([]);
	const workerItme = ref([]);
	const workerList = ref([]);
	const paging = ref(null);
	// 传参
	const emits = defineEmits(['hanldeNext']);
	// 接收参数
	const props = defineProps({
		num: {
			type: [Number, String],
			default: 1
		}
	})

	const hourChange = (data) => {
		let timeData = {
			works: store.workerParams.works,
			lat: store.workerParams.lat,
			lgt: store.workerParams.lgt,
			timestamp_list: utils.getDatesToEndOfMonth(data?.month, data?.hour)
		}

		enableWorkerCnt(timeData).then(res => {
			calenderNum.value = res?.data?.lists || [];
		})
	}


	const worker_ids = ref([]);
	const calenderNum = ref([]);
	// 获取详情
	const getPageListNearby = () => {
		let data = {
			...store.workerParams,
			ps: 50,
			except_worker_ids: worker_ids.value,
			plan_begin_at: timeFormat(store.workerParams.plan_begin_at, 'yyyy-mm-dd hh:00'),
		}

		if (level.value) {
			data.level = level.value;
		}
		hourChange();
		pageListNearbyV2(data).then(res => {
			if (res?.code == 200) {
				workerList.value = res?.data?.lists;
				worker_ids.value = res?.data?.except_worker_ids;
			} else {}
		})
	}

	// 点击文字
	const hanldeClick = (id) => {
		const items = workerList.value.find(i => i.id == id);
		if (workerId.value.includes(id)) {
			workerId.value = workerId.value.filter(item => item !== id);
			workerItme.value = workerItme.value.filter(item => item.id !== id);
		} else {
			// 大于1
			if (props.num > 1) {
				workerId.value = workerId.value.filter(item => item !== id);
				workerItme.value = workerItme.value.filter(item => item.id !== id);
			} else {
				if (workerId.value.length == props.num) {
					workerItme.value.shift();
					workerId.value.shift();
				}
			}
			workerId.value.push(id);
			workerItme.value.push(items);
		}
	}

	// 查看工人详情
	const hanldeworkerInfo = (id) => {
		uni.redirectTo({
			url: '/pages/worker/detail?worker_id=' + id + '&type=page'
		})
	}

	const hanldeNext = () => {
		emits('hanldeNext', workerItme.value);
	}

	onMounted(() => {
		getPageListNearby();
	})
</script>

<style scoped lang="scss">
	.border {
		border: 1px solid #0055FE;
		border-radius: 50%;
		width: 36rpx;
		height: 36rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
	}

	.z-paging {
		height: 100px;
		/* 设置z-paging的高度为300像素 */
	}

	.container {
		background: #F5F6F7;

		.scroll-y {
			height: calc(100vh);
		}

		.buttom {
			border-top: 2rpx solid #f2f2f2;
			margin-top: 24rpx;
		}

		.checkbox-border {
			border: 2rpx solid rgb(200, 201, 204);
			box-sizing: border-box;
			height: 32rpx;
			width: 32rpx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.image {
			display: block;
			width: 100rpx;
			height: 100rpx;
			max-width: 100rpx;
			border-radius: 50%;
		}

		.button-bottom {
			width: 100%;
			padding: 35rpx 40rpx;
			box-sizing: border-box;
			background: white;
			// position: fixed;
			// bottom: 0rpx;
			// left: 0rpx;
			z-index: 2;
		}

		.btn {
			width: 100%;
			height: 100rpx;
			border-radius: 50rpx;
			border: 2rpx solid #C1C1C1;
			line-height: 100rpx;
			text-align: center;
		}

	}

	.range {
		width: 20rpx;
		height: 25rpx;
		margin-right: 10rpx;
	}

	.medal {
		width: 26rpx;
		height: 21rpx;
		display: block;
	}

	.bg-gold {
		background: linear-gradient(90deg, #FEF2E7 0%, #EECBAE 100%);
		border-radius: 25rpx;
		color: #785940;
		padding: 5rpx 15rpx;
	}

	.bg-silver {
		background: linear-gradient(135deg, #ECECEC 0%, #CCCCCC 100%);
		border-radius: 25rpx;
		color: #444444;
		padding: 5rpx 15rpx;
	}

	.bg-high {
		background: rgba(0, 85, 254, 0.1);
		border-radius: 25rpx;
		color: $uni-color-primary;
		padding: 5rpx 15rpx;
	}

	.range-right {
		flex-shrink: 0;
	}

	:deep(.u-checkbox) {
		width: 100%;
	}

	.button-bottom {
		width: 100%;
		padding: 35rpx 40rpx;
		box-sizing: border-box;
		background: white;
		position: fixed;
		bottom: 0rpx;
		z-index: 2;
	}

	.select {
		color: #ABA9B4;
	}
</style>